import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {
  currentClock: 'analog' | 'digital' = 'digital';

  ngOnInit() {
    this.createStars();
  }

  createStars() {
    if (window.innerWidth > 768) {
      const starsContainer = document.querySelector('.stars');
      const numStars = 200;
  
      for (let i = 0; i < numStars; i++) {
        const star = document.createElement('div');
        star.className = 'star';
        star.style.left = `${Math.random() * 100}%`;
        star.style.top = `${Math.random() * 100}%`;
        star.style.animationName = 'twinkle';
        star.style.animationDuration = `${Math.random() * 3 + 1}s`;
        star.style.animationDelay = `${Math.random() * 3}s`;
        star.style.animationIterationCount = 'infinite';
        starsContainer?.appendChild(star);
      }
    }
  }

  toggleClock() {
    this.currentClock = this.currentClock === 'analog' ? 'digital' : 'analog';
  }
}
